<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.0-beta3/css/bootstrap.css"
      rel="stylesheet"
    />
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <title>Ajax取消请求</title>
    <style>
      #result {
        width: 200px;
        height: 100px;
        border: solid 1px pink;
      }
    </style>
  </head>

  <body>
    <h2 class="page-header">Axios 发送Ajax请求</h2>
    <button class="btn btn-primary">GET</button>
    <button class="btn btn-danger">POST</button>
    <button class="btn btn-info">通用型</button>
  </body>
  <script type="text/javascript">
    $("button")
      .eq(0)
      .click(function () {
        fetch("http://127.0.0.1:8000/fetch", {
          //请求方法
          method: "POST",
          //请求头
          headers: {
            name: "pst-ftc",
          },
          //请求体
          body: "username=admin&password=admin",
        }).then((response) => {
          console.log(response);
        });
      });
    $("button")
      .eq(1)
      .click(function () {
        axios
          .post(
            "http://127.0.0.1:8000/axios",
            {
              username: "admin",
              password: "hhynb",
            },
            {
              //url参数
              params: {
                id: 100,
                vip: 7,
              },
              headers: {
                name: "wxy",
                say: "66666",
              },
            }
          )
          .then((value) => {
            console.log(value);
          });
      });
    $("button")
      .eq(2)
      .click(function () {
        axios({
          method: "GET",
          url: "http://127.0.0.1:8000/axios",
          params: {
            vip: 10,
            levels: 30,
          },
          headers: {
            a: 100,
            b: 200,
          },
          data: {
            username: "admin",
            password: "admin",
          },
        }).then((value) => {
          console.log(value);
        });
      });
  </script>
</html>
